// div => div内容 => 插入DOM
// const root = document.getElementById("root");

// const app = document.createElement("div");
// app.id = "app";
// root.append(app);

// const textNode = document.createTextNode("app");
// const textNode = document.createTextNode("");
// textNode.nodeValue = "app1";
// app.append(textNode)

// vdom -> object + DOM api
// const textEl = {
//     type: "TEXT_ELEMENT",
//     props: {
//         nodeValue: "app",
//         children: []
//     }
// }

// const el = {
//     type: "div",
//     props: {
//         id: "app",
//         children: [
//             textEl,
//         ]
//     }
// };

// const dom = document.createElement(el.type);
// dom.id = el.props.id;
// const textNode = document.createTextNode("");
// textNode.nodeValue = textEl.props.nodeValue;
// dom.append(textNode);
// root.append(dom);

// 【createTextNode】 【 createElement】
function createTextNode (nodeValue) {
  return {
    type: 'TEXT_ELEMENT',
    props: {
      nodeValue,
      children: []
    }
  }
}

function createElement (type, props, ...children) {
  return {
    type: type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === 'string' ? createTextNode(child) : child
      )
    }
  }
}

// const textEl = createTextNode("app111");
// const App = createElement("div", {
//     id: "app"
// }, textEl);

// const dom = document.createElement(App.type);
// dom.id = App.props.id;
// dom.append(textNode);

// const textNode = document.createTextNode("");
// textNode.nodeValue = textEl.props.nodeValue;
// root.append(dom);

function render (el, container) {
  const dom =
    el.type === 'TEXT_ELEMENT'
      ? document.createTextNode('')
      : document.createElement(el.type)

  // id class
  Object.keys(el.props).forEach(key => {
    if (key !== 'children') {
      dom[key] = el.props[key]
    }
  })

  const children = el.props.children
  children.forEach(child => {
    render(child, dom)
  })

  container.append(dom)
}

// const App = createElement('div', { id: 'app' }, 'app222')
// render(App, document.querySelector('#root'))


// ReactDOM.createRoot
// const ReactDOM = {
//     createRoot(container) {
//         return {
//             render(App) {
//                 render(App, container);
//             }
//         }
//     }
// }

// const App = createElement("div", { id: "app" }, "hi: ", "mini-react");
// ReactDOM.createRoot(document.querySelector('#root')).render(App);